<template>
    <orh-table add="add" pages :pageDate="pageDate" @on-add="addSilde" @on-page-change="queryData" del="del"
               @on-del="confirm" reload @on-reload="refresh">

        <!-- <semester-change @on-select="peoplebutton" slot="option"></semester-change> -->
        <Select v-model="yearmodel" style="width:200px" slot="option" @on-change="xuelistInfo">
            <Option v-for="item in yearlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Table :columns="columns1" @on-selection-change="selectOne" :loading="tableload" :data="datalist"
               slot="table"></Table>

        <orh-sidebar v-model="show" :title="pageTitle" scale slot="others">
            <component :is="'Operation'" :infoId="infoId" @showParent="showParent=>show=showParent"
                       @backList="backList"></component>
        </orh-sidebar>
    </orh-table>
</template>

<script>
    export default {
        name: 'teacher-attendancetimesetting',
        components: {
            Operation: () => import("./Operation.vue").then(m => m.default || m),
            SemesterChange: () => import("&/Authpub/semesterchange.vue").then(m => m.default || m)
        },

        data() {
            return {
                listUrl: 'api/teacher/v1/certificationdedey/list?page=',
                delUrl: 'api/teacher/v1/certificationdedey/del/',
                yearlist: [],
                yearmodel: '',
                pageDate: {
                    total: 0,
                    current_page: 1,
                    per_page: 10
                },


                pageTitle: '', //右边页面的title
                tableload: true, //表格加载动画

                del: [], //删除
                show: false,

                datalist: [], //年级变量
                infoId: null, //用于向修改页面传id值
                columns1: [{
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    fixed: 'left'
                },
                    {
                        title: '学年学期',
                        width: 230,
                        // key: 'grade_order',
                        render: (h, params) => {
                            let name = params.row.schoolyear !== null ? params.row.schoolyear.schoolyear_name.zh : '' + ' ' + params.row.semester.semester_name.zh
                            return h('div', name)
                        }
                    },
                    {
                        title: '类型',
                        width: 100,
                        render: (h, params) => {
                            let name = (params.row.type == 1) ? '上午' : (params.row.type == 2 ? '中午' : (params.row.type == 3 ? '下午' : '晚自习'))
                            return h('div', name)
                        }
                    },
                    {
                        title: '时间段',
                        width: 280,
                        render: (h, params) => {
                            let name = params.row.time_an + ' -- ' + params.row.time_en
                            return h('div', name)
                        }
                    },
                    {
                        title: '  ',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    directives: [{
                                        name: 'button',
                                        value: 'edit',
                                    }],
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.row.id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    directives: [{
                                        name: 'button',
                                        value: 'del',
                                    }],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.del = [params.row.id]
                                            this.confirm()
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
            }
        },
        methods: {
            /************************************************************
             *
             * 请求列表数据
             *
             ************************************************************/
            queryData(index = 1) {
                this.tableload = true
                this.$http.get(`${this.listUrl}${index}`).then(val => {
                    this.datalist = val.data.data
                    if (val.pages) {
                        this.pageDate.total = val.data.total
                        this.pageDate.per_page = val.data.per_page
                        this.pageDate.current_page = val.data.current_page
                    }
                    this.tableload = false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.tableload = false
                });
            },

            /************************************************************
             *
             * 点击添加
             *
             ************************************************************/
            addSilde() {
                this.show = true
                this.infoId = false
                this.pageTitle = '添加'
            },

            /************************************************************
             *
             * 点击编辑
             *
             ************************************************************/
            update(index) {
                this.infoId = index
                this.show = true
                this.pageTitle = '修改'

            },

            /************************************************************
             *
             * 修改添加返回数据更新
             *
             ************************************************************/
            backList(val) {
                if (val == true) {
                    this.queryData(this.pageDate.current_page);
                }
            },

            /************************************************************
             *
             * 批量删除
             *
             ************************************************************/
            selectOne(index) {
                this.del = index.map(item => item.id)
            },

            /************************************************************
             *
             * 执行删除操作
             *
             ************************************************************/
            confirm() {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>您确定要删除这些数据吗?</p>',
                    onOk: () => {
                        if (this.del.length == 0) {
                            this.$Message.error('请选择删除项');
                            return
                        }
                        this.del = JSON.stringify(this.del)
                        this.tableload = true
                        this.$http.delete(`${this.delUrl}${this.del}`)
                            .then(val => {
                                this.del = []
                                this.queryData(this.pageDate.current_page)
                                this.$Message.success(val.message);
                            })
                            .catch(err => {
                                if (err.code && err.code == 422) {
                                    this.$Message.error(err.message);
                                }
                                this.del = []
                                this.tableload = false
                            })
                    },
                });
            },

            /************************************************************
             *
             * 刷新数据（当前分页）
             *
             ************************************************************/
            refresh() {
                this.queryData(this.pageDate.current_page)
            },

            /************************************************************
             *
             * 点击学年学期请求列表数据
             *
             ************************************************************/
            peoplebutton(val) {
                this.listUrl = `api/teacher/v1/certificationdedey/list?attendance_management_id=${val}&page=`
                this.queryData()
            },
            load() {
                // 加载学年
                this.$http.get('api/semester/v1/schoolyear/info').then((response) => {
                    this.yearlist = this.process_year(response.data);
                    // this.Dis=false
                });
            },
            // 学年处理数据
            process_year(data) {
                let arr = []
                data.forEach(item => {
                    arr.push({
                        value: item.schoolyear_id,
                        label: item.schoolyear_name.zh ? item.schoolyear_name.zh : item.schoolyear_name.mn
                    })
                })
                return arr
            },
            xuelistInfo(value) {
                this.tableload = true
                this.yearmodel = value
                this.peoplebutton(value)
                // this.$http.get('api/teacher/v3/certificationdedey/list?attendance_management_id='+value).then(val=>{
                //       console.log(val)
                //     this.datalist=val.data.data
                //     this.pageDate.total=val.pages.total
                //     this.pageDate.per_page=val.pages.per_page
                //     this.pageDate.current_page=val.pages.current_page
                //     this.tableload = false

                // },err=>console.log(err))


            },
        },
        mounted() {
            // this.queryData();
            this.load()
            this.$http.get('api/semester/v1/semester/now_semester').then(val => {
                if (val.data[0] != null) {
                    this.yearmodel = val.data[0].schoolyear_id;
                    this.xuelistInfo(val.data[0].schoolyear_id)
                }
            });
        },
    }
</script>
